<template>
  <!-- 产品下的智能穿戴 -->
  <div class="smart">
      <div class="smart-banner">
          <img src="../../img/smartImg/banner.jpg" alt="">
      </div>
      <div class="page">
           <Title title="看看哪款TIAN WATCH适合您" text=""/>
           <div class="smart-tab">
               <p>
                    <span v-for="(va,index) in product" 
                    :key="va"
                    :class="{'active':curindex==index}"
                    @click="change(index)"
                    >{{va}}</span>
                </p>
                <div class="tab-img">
                    <div class="tab-left">
                        <img :src="list[curindex].img" alt="">
                    </div>
                    <div class="tab-right">
                        <p></p>
                        <h1>{{list[curindex].title}}</h1>
                        <span>屏幕类型：{{list[curindex].type}}</span>
                        <span>连接方式：{{list[curindex].link}}</span>
                        <span>主要功能：{{list[curindex].funk}}</span>
                        <span>防水等级：{{list[curindex].level}}</span>
                    </div>
                </div>
           </div>
      </div>
        <div class="mark">
            <h1>纳米抗菌新材料 长时间佩戴无异味</h1>
            <p>外在的磨砂质感，内在的抗菌功能，这是经过实验一步步 </p>
            <p>研发而出、适合人体体质的材料。即使长时间佩戴</p>
            <p>也不会有股嗖嗖的异味，还能防止皮肤瘙痒。</p>
        </div>
        <div class="page watch-page">
            <div class="watch-show">
                <div class="watch-up">
                    <div class="watch-left">
                        <p></p>
                        <h1>心电图检测</h1>
                        <span>心慌？胸闷？胸痛？头昏？抬手做个实时心电图，让专业</span>
                        <span>医疗团队为您解读报告，及时了解身体状态，每日定期记</span>
                        <span>录一次，长期跟进更能及时预</span>
                    </div>
                    <div class="watch-right">
                        <img src="../../img/smartImg/xin.jpg" alt="">
                    </div>
                </div>
                 <div class="watch-up">
                    <div class="watch-right">
                        <img src="../../img/smartImg/xix.jpg" alt="">
                    </div>
                    <div class="watch-left watch-center">
                        <p></p>
                        <h1>血压</h1>
                        <span>血压管理专家 从此远离高血压，TIAN WATCH及时检测血压值，</span>
                        <span>方便快捷、告别传统血压检测器,随时随地检测，长期跟踪数据，</span>
                        <span>提供检测健康报告及调理方案，让高血压有效管理。</span>
                    </div>
                </div>
                  <div class="watch-up">
                    <div class="watch-left">
                        <p></p>
                        <h1>血氧</h1>
                        <span>疲劳？记忆力下降？来个血氧检测血氧饱和度低时容易引发疲</span>
                        <span>劳，记忆力下降，长期血氧饱和度低还会对大脑、心脏等器官</span>
                        <span>造成伤害。TIAN WATCH24小时智能监测血氧饱和度，全天候</span>
                        <span>看护您的血氧健康，预防心脑疾病发生</span>
                    </div>
                    <div class="watch-right">
                        <img src="../../img/smartImg/xin.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>
    
<script>
import Title from '../../components/Title'
import img1 from '../../img/smartImg/shoubiao.jpg'
import img2 from '../../img/smartImg/2.jpg'
import img3 from '../../img/smartImg/3.jpg'
export default {
    components:{
        Title
    },
    data(){
        return {
            product:['智能手表','儿童手表','老年手环'],
            curindex:0,
            list:[
                {
                    img:img1,
                    title:'智能健康手表',
                    type:'圆形',
                    link:'4G',
                    funk:'血压、血氧、心电、心率',
                    level:' IP67'
                },
                {
                    img:img2,
                    title:'儿童',
                    type:'方形',
                    link:'4G',
                    funk:'爱心奖励、AI机器人、远程监听环境',
                    level:' IP67'
                },
                 {
                    img:img3,
                    title:'老年人手环',
                    type:'圆形',
                    link:'4G',
                    funk:'血压、血氧、心电、心率',
                    level:' IP67'
                }
            ]
        }
    },
    methods:{
        change(i){
            this.curindex=i;
        }
    }
}
</script>

<style lang='scss' scoped>
.smart{
    width: 100%;
    background: #2f4cb3;
}
.smart-banner{
    width: 100%;
    img{
        width: 100%;
    }
}
.page{
    padding-top: 144px;
}
.watch-page{
    padding-top: 0;
    margin-top: 50px;
}
.smart-tab{
    width: 100%;
    p{
        width: 100%;
        display: flex;
        justify-content: center;
        span{
            width: 138px;
            height: 49px;
            font-size: 20px;
            background: #4867d9;
            text-align: center;
            line-height: 50px;
            color: #b9c8ff;
            margin-right: 10px;
            border-radius: 2px;
            cursor: pointer;
        }
        .active{
            background: #446cfe;
            color: white;
        }
    }
    .tab-img{
        width: 100%;
        display: flex;
        background: #446cfe;
        margin-top: 50px;
        .tab-left{
            flex: 2;
        }
        .tab-right{
            flex: 1;
            display: flex;
            flex-direction: column;
            color: white;
            justify-content: center;
            p{
                width: 100px;
                height: 5px;
                background: #65fdf4;
                margin-bottom: 28px;
            }
            h1{
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 28px;
            }
            span{
                margin-bottom: 20px;
                font-size: 18px;
            }
        }
    }
}
.mark{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    background: url(../../img/smartImg/bg.jpg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    h1{
        font-size: 48px;
        margin-bottom: 40px;
    }
    p{
        font-size: 22px;
        margin-top: 20px;
    }
}
.watch-show{
    width: 100%;
    padding-bottom: 200px;
}
.watch-up{
    width: 100%;
    display: flex;
    color: white;
    .watch-left{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 50px;
        justify-content: center;
        background: #3755c5;
        p{
            width: 100px;
            height: 5px;
            background: #65fdf4;
            margin-bottom: 20px;
        }
        h1{
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 28px;
        }
        span{
            margin-bottom: 20px;
            font-size: 20px;
        }
    }
    .watch-right{
        flex: 1;
    }
    .watch-center{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-right: 0;
        padding-left: 50px;
        justify-content: center;
        span{
            font-size: 20px;
        }
    }
}
</style>